{% extends "SchoolBuy/base.html" %}
{% block title %}首页{% endblock %}
{% block detial %}
    <link rel="stylesheet" href="{{ STATIC_URL }}SchoolBuy/css/index.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}SchoolBuy/css/slide.css">
<header>
    <div class="banner">
    <div id="slide3d" class="slide-carousel slide-3d">
        <ul  class="item-list clearfix">
            <li class="item0">
                <div class="item-content">
                    <a href="javascript:void(0);">
                        <img class="cover-img" src="{{ STATIC_URL }}SchoolBuy/images/book.jpg" alt="">
                    </a>
                </div>
            </li>
            <li class="item1">
                <div class="item-content">
                    <a href="javascript:void(0);">
                        <img class="cover-img" src="{{ STATIC_URL }}SchoolBuy/images/clothes.png" alt="">
                    </a>
                </div>
            </li>
            <li class="item2">
                <div class="item-content">
                    <a href="javascript:void(0);">
                        <img class="cover-img" src="{{ STATIC_URL }}SchoolBuy/images/elec.jpg" alt="">
                    </a>
                </div>
            </li>
            <li class="item3">
                <div class="item-content">
                    <a href="javascript:void(0);">
                        <img class="cover-img" src="{{ STATIC_URL }}SchoolBuy/images/bake.jpg" alt="">
                    </a>
                </div>
            </li>
            <li class="item4">
                <div class="item-content">
                    <a href="javascript:void(0);">
                        <img class="cover-img" src="{{ STATIC_URL }}SchoolBuy/images/toys.png" alt="">
                    </a>
                </div>
            </li>
            <li class="item5">
                <div class="item-content">
                    <a href="javascript:void(0);">
                        <img class="cover-img" src="{{ STATIC_URL }}SchoolBuy/images/brushes.png" alt="">
                    </a>
                </div>
            </li>
        </ul>
            <!--indicators-->
        <div class="indicator-list">
            <a href="javascript:void(0);" data-slide-index="0" class="selected">
                <img src="{{ STATIC_URL }}SchoolBuy/images/game.png" alt="">
            </a>
            <a href="javascript:void(0);" data-slide-index="1">
                <img src="{{ STATIC_URL }}SchoolBuy/images/cake.png" alt="">
            </a>
            <a href="javascript:void(0);" data-slide-index="2">
                <img src="{{ STATIC_URL }}SchoolBuy/images/pets.png" alt="">
            </a>
            <a href="javascript:void(0);" data-slide-index="3">
                <img src="{{ STATIC_URL }}SchoolBuy/images/brush.png" alt="">
            </a>
            <a href="javascript:void(0);" data-slide-index="4">
                <img class="cover-img" src="{{ STATIC_URL }}SchoolBuy/images/library.png" alt="">
            </a>
            <a href="javascript:void(0);" data-slide-index="5">
                <img class="cover-img" src="{{ STATIC_URL }}SchoolBuy/images/cloth.png" alt="">
            </a>
        </div>
        <!--controls-->
        <div class="controls">
            <a  class="item-prev glyphicon glyphicon-menu-left" href="javascript:void(0);"></a>
            <a  class="item-next glyphicon glyphicon-menu-right" href="javascript:void(0);"></a>
        </div>
    </div>
</div>
</header>
    <script src = "{{ STATIC_URL }}SchoolBuy/js/index.js"></script>
    <script>
       $(function(){
        $('#slide3d').slideCarsousel({slideType:'3d',indicatorEvent:'mouseover'});
    });
    </script>
{% endblock %}